<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./login.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4592399_bonffwhcgwp.css">
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div class="box radius">
            <!-- 左二维码 -->
            <div class="left">
                <p class="saomiao">扫描二维码登录</p>
                <div class="" @mouseover="over" @mouseout="out">
                    <img v-if="display" src="./下载.png">
                    <img v-else="show" src="">
                </div>
                <div class="di">
                    <p>请使用<span>哔哩哔哩客户端登录</span></p>
                    <p>扫码登陆或下载APP</p>
                </div>
            </div>

            <!-- 右 -->
            <div class="right">
                <!-- top text -->
                <div class="info">
                    <button type="button" class="btn">密码登录</button>
                    <button type="button" class="btn">短信登录</button>
                </div>

                <!-- 中间 -->
                <form class="mima">
                    <div class="radius">账号<input class="radius" type="text" id="Login" placeholder="请输入账号"
                            v-model="value1" @input="checkout">
                    </div>
                    <!-- <div v-if="show">你的手机号不符合规定</div> -->
                    <div class="radius">密码<input :type="show1?'text':'password'" v-model="value" @input="checkout"
                            class="radius" @focus="close=false" @blur="blur=true" id="password" placeholder="请输入密码">


                    </div>
                </form>



                <div class="btn">
                    <button @click="" id="btnReg" class="radius">注册</button>
                    <button @click="sub" id="btnLog" class="radius">登录</button>
                    <p>其他方式登录</p>
                </div>

                <div class="other">
                    <sapn class="icon"><img src="./微信.png">微信登陆</sapn>
                    <sapn class="icon"><img src="微博.png">微博登录</sapn>
                    <sapn class="icon"><img src="./QQ.png">QQ登录</sapn>
                </div>
            </div>
            <div class="zhushi">

                <p> 未注册过哔哩哔哩的手机号，我们将自动帮你注册账号 <!----></p>
                <p> 登录或完成注册即代表你同意 <span> 用户协议 <span class="link_word"> 和 </span></span>
                    <span> 隐私政策 <span class="link_word"> </span></span>
                </p>
            </div>

            <!-- 左下 -->
            <div class="kt">
                <img v-if="display" src="./22.png" class="kt1">
                <img v-else="show" src="./22_close.9382a5a8.png" class="kt1">
            </div>
            <!-- 右下 -->
            <div class="kt">
                <img v-if="display" src="./33.png" class="kt2">
                <img v-else="show" src="./33_close.a8c18fc8.png" class="kt2">
            </div>
        </div>
    </div>


</body>
<script src="/vue.js"></script>
<script>
    const { createApp, ref } = Vue
    createApp({
        setup() {
            let display = ref(false)
            let isdisplay = ref(true)
            let value = ref('')
            let value1 = ref('')
            let show1 = ref(false)

            let show = ref(false)
            function over() {
                display.value = !display.value
            }
            function out() {
                display.value = false
            }
            function checkout() {
                if (/^1[3-9]\d{9}$/.test(zh.value) || '/^\d{6}$/'.text(pwd.value)) {
                    isdisplay = false
                } else {
                    isdisplay = true
                }
            }

            function close() {

                isdisplay.value = false
            }
            function blur() {
                isdisplay.value = true
            }
            function sub() {
                if (/^1[3-9]{10}$/.test(value.value)) {
                    show.value = false
                } else {
                    show.value = true
                }
            }

            return {
                over,
                out,
                display,
                isdisplay,
                close,
                blur,
                value,

                sub,
                show1


            }
        }
    }).mount("#app")
</script>

</html>